<template>
  <div class="listDiv">
    <div class="cardRow" v-for="(item,index) in tableData" :key="index" @click="RowClick(item)">
      <div class="left_dv">{{index}}</div>
      <div class="right_dv">{{item.MergencyLevel}}</div>
      <div clas="middleContent">
        <div class="upContent">{{item.MissionCode}}</div>
        <div class="downContent">{{item.MissionName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: Array
  },
  data () {
    // const data = {
    //   MissionName: '地表水监测',
    //   MissionCode: '201922828',
    //   MergencyLevel: '1',
    //   MissionId: '0000-0000-0000-0000'
    // }
    return {
      // tableData: Array(20).fill(data)
    }
  },
  methods: {
    RowClick (val) {
      // this.$message(val.MissionId)
      this.$emit('RowClick', val.MissionId)
    }
  }
}
</script>

<style lang="stylus">
.listDiv
  height 500px
  overflow auto
.listDiv::-webkit-scrollbar /* 滚动条整体样式 */
  width 4px /* 高宽分别对应横竖滚动条的尺寸 */
  height 4px
.listDiv::-webkit-scrollbar-thumb /* 滚动条里面小方块 */
  border-radius 5px
  -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  background rgba(0, 0, 0, 0.2)
.listDiv::-webkit-scrollbar-track /* 滚动条里面轨道 */
  -webkit-box-shadow inset 0 0 5px rgba(0, 0, 0, 0.2)
  border-radius 0
  background rgba(0, 0, 0, 0.1)
.cardRow
  width 98%
  background-color #ffffff
  height 48px
  opacity 0.75
  border-bottom 2px solid #ebeef5
.cardRow:hover
  background-color #c8d3e8
  cursor pointer
  animation anishadow 1s 1 forwards
  box-shadow 1px 0px 5px #888888
  border-bottom 0px solid #ebeef5
.left_dv
  float left
  height 100%
  width 20%
  line-height 3
.right_dv
  float right
  height 100%
  width 20%
  line-height 2
.upContent
  height 40%
  text-align left
  margin 2px 0px 0px 0px
.downContent
  height 50%
  color #999999
  text-align left
  margin 0px 0px 0px 2px
.middleContent
  float right
  height 100%
  width 60%
@keyframes anishadow
  0%
    opacity 0.25
  50%
    opacity 0.75
  100%
    opacity 1
</style>
